<template>
  <section v-loading="loading">
    <el-button size="mini" @click="addSaleDialogBtn">新建商铺活动</el-button>
    <el-dialog :visible.sync="editSaleDialog" :title="(currSale && currSale.id)?'编辑':'新建'" width="60%" v-if="editSaleDialog">

      <new-sale :sale="currSale" v-on:closeDialog="closeDialog"></new-sale>
    </el-dialog>
    <el-table :data="saleList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="title"/>
      <el-table-column label="类型" prop="saleType.name"/>
      <el-table-column label="起止时间" min-width="290px">
        <template slot-scope="scope">
          {{formatDatetime(scope.row.start)}} 至 {{formatDatetime(scope.row.end)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" @click="editBtn(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
  </section>
</template>

<script>
  import newSale from './newSale'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "saleList",
    components: {newSale},
    data() {
      return {
        loading:false,
        editSaleDialog:false,
        saleList:null,
        totalPage:0,
        currSale:null
      }
    },
    created(){
      this.loading=true
      this.getSaleList()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      editBtn(row){
        console.log(row)
        this.currSale=row
        this.editSaleDialog=true
      },
      deleteBtn(id){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delSale",data:{id}})
              .then(res=>{
                console.log(res)
                this.getSaleList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      formatDatetime(date){
        console.log(date)
        return dateFormater.formatDatetime(date)
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList",data:{storeId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.mallGoodsTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      goPage(val){
        this.getSaleList(val-1)
      },
      confirm(row){
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          this.updateFood(row)
        }else {
          row.edit=true
        }
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delFood",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.foodList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      updateFood(row){
        this.fetch({name:"updateFood",data:{...row}})
          .then(res=>{
            this.loading=false
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addSaleDialogBtn(){
        this.currSale=null
        this.editSaleDialog=true
        //加载saleType
        // this.createSale()
      },
      getSaleList(pageNo){
        this.fetch({name:"getSaleList",data:{page:pageNo?pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.saleList=res.content
            this.totalPage=res.totalPages
            this.loading=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      closeDialog(){
        this.editSaleDialog=false
        console.log(this.saleList)
        this.getSaleList()
      }
    }
  }
</script>

<style scoped>
  .icon{
    margin-left:43%;
    margin-top:10px;
    width:5%;
    height:5%;
    color: seagreen
  }
</style>
